import React, { Component } from 'react'

export default class NotControlForm extends Component {
  username = React.createRef();
  password = React.createRef();

  render() {
    return (
      <div>
        <h2>登录</h2>
        <hr />
        <form action="">
          用户名: <input ref={this.username} type="text" /><br></br>
          密码: <input type="password" ref={this.password} /><br />
          <hr />
          <button onClick={this.login}>登录</button>
        </form>
      </div>
    )
  }

  //登录的事件回调
  login = (e) => {
    //建议将阻止默认行为代码前置
    e.preventDefault();
    //获取用户名和密码的值
    let user = this.username.current.value;
    let pass = this.password.current.value;
    console.log(`用户名为: ${user} 密码为: ${pass}`);
  }
}
